<script setup lang="ts">
import { getCategoryBrandListFn, getCategoryBrandProListFn, getCategoryListFn } from '@/api/kind';
import { onMounted, reactive, ref } from 'vue'
import type { Ref } from 'vue'
import type { iState } from './kind'
import { useRouter } from 'vue-router';

const router = useRouter()

const state: iState = reactive({
    categoryList: [],
    brandList: [],
    proList: []
})

// 获取品牌列表
function getCategoryBrandList(category: string) {
    getCategoryBrandListFn({
        category
    }).then(res => {
        // console.log(res);
        state.brandList = res.data.data

        getCategoryBrandProList({
            category,
            brand: res.data.data[0].brand
        })
    })
}

// 获取商品列表
function getCategoryBrandProList(data: { category: string, brand: string }) {
    getCategoryBrandProListFn(data).then(res => {
        // console.log(res);
        state.proList = res.data.data
    })
}

onMounted(() => {
    // 获取分类列表
    getCategoryListFn().then(res => {
        // console.log(res);
        state.categoryList = res.data.data

        getCategoryBrandList(res.data.data[0])
    })
})


// --------------- 切换分类
const sidebarIndex: Ref<number, number> = ref(0)
function sidebarChange(index: number) {
    // console.log(index);
    getCategoryBrandList(state.categoryList[index])
}

// --------------- 切换品牌
const tabsIndex: Ref<number, number> = ref(0)
function tabsChange(data: { name: string | number, title: string, event: MouseEvent, disabled: boolean }) {
    // console.log(data.name, data.title);
    getCategoryBrandProList({
        category: state.categoryList[sidebarIndex.value],
        brand: data.title
    })
}
// --------------- 进入详情
function goToDetail(proid: string) {
    router.push({
        path: '/detail',
        query: {
            proid
        }
    })
}
</script>
<template>
    <main class="box">
        <header class="header">
            <span>头部-分类</span>
        </header>

        <div class="content">
            <div class="left">
                <van-sidebar v-model="sidebarIndex" @change="sidebarChange">
                    <van-sidebar-item v-for="item in state.categoryList" :key="item" :title="item" />
                </van-sidebar>
            </div>
            <div class="right">
                <div class="right-header">
                    <van-tabs title-active-color="#f66" line-width="0" v-model="tabsIndex" @click-tab="tabsChange">
                        <van-tab v-for="item in state.brandList" :title="item.brand" :key="item.brand"></van-tab>
                    </van-tabs>
                </div>
                <div class="right-content">
                    <van-grid column-num="3">
                        <van-grid-item @click="goToDetail(item.proid)" v-for="item in state.proList" :key="item.proid"
                            :icon="item.img1" :text="item.brand" />
                    </van-grid>
                </div>
            </div>
        </div>
    </main>
</template>

<style scoped lang="scss">
.left {
    float: left;
    width: 22%;
    height: 100%;
    background-color: #f5f5f5;
    overflow: auto;
}

.right {
    float: right;
    width: 78%;
    height: 100%;
    background-color: #f5f5f5;
}
</style>